<template>
    <div>

        <cu-navbar>
            <block slot="content">我的账户</block>
        </cu-navbar>
        <view class="userinfo-page page">
            <u-form labelPosition="left" labelWidth="200rpx"  ref="form1">
                <u-form-item label="银行账户名" prop="userInfo.bank_username" borderBottom ref="item1">
                    <u-input placeholder="请输入银行账户号" v-model="userInfo.bankname" ></u-input>
                </u-form-item>
                <u-form-item label="开户分行" prop="userInfo.bank_name" borderBottom ref="item1">
                    <u-input placeholder="请输入开户分行" v-model="userInfo.kaihubank" ></u-input>
                </u-form-item>
                <u-form-item label="银行卡号" prop="userInfo.bank_no" borderBottom ref="item1">
                    <u-input placeholder="请输入银行卡号" v-model="userInfo.bankcard" ></u-input>
                </u-form-item>
                <u-form-item label="真实姓名" prop="userInfo.realname" borderBottom ref="item1">
                    <u-input placeholder="请输入真实姓名" v-model="userInfo.realname" ></u-input>
                </u-form-item>

                <u-form-item label="联系电话" prop="userInfo.phone" borderBottom ref="item1">
                    <u-input  placeholder="请输入手机号码" disabled  v-model="userInfo.mobile" ></u-input>
                </u-form-item>
                <u-form-item label="微信姓名" prop="userInfo.wxname" borderBottom ref="item1">
                  <u-input placeholder="请输入微信姓名" v-model="userInfo.wxname" ></u-input>
                </u-form-item>
                <u-form-item label="微信付款码" prop="userInfo.weixinpic" borderBottom ref="item1">
                  <u-upload
                      @on-success="uploadweixinpic"
                      @on-remove="removeweixinpic"
                      name="file"
                      :action="action"
                      :max-count="1" :header="header" :file-list="weixinpicList" ></u-upload>
                </u-form-item>
              <u-form-item label="支付宝姓名" prop="userInfo.zfbname" borderBottom ref="item1">
                <u-input placeholder="请输入支付宝姓名" v-model="userInfo.zfbname" ></u-input>
              </u-form-item>
              <u-form-item label="支付宝付款码" prop="userInfo.alipic" borderBottom ref="item1">
                <u-upload
                    @on-success="uploadAlipic"
                    @on-remove="removeAlipic"
                    name="file"
                    :action="action"
                    :max-count="1" :header="header" :file-list="aliPicList" ></u-upload>
              </u-form-item>
              <u-form-item label="姓名" prop="userInfo.usdtbname" borderBottom ref="item1">
                <u-input placeholder="请输入姓名" v-model="userInfo.usdtbname" ></u-input>
              </u-form-item>
              <u-form-item label="其他付款码" prop="userInfo.usdtpic" borderBottom ref="item1">
                <u-upload
                    @on-success="uploadavatar"
                    @on-remove="removeavatar"
                    name="file"
                    :action="action"
                    :max-count="1" :header="header" :file-list="avatarList" ></u-upload>
              </u-form-item>
                <u-form-item label="验证码" borderBottom ref="item1">
                    <div class="f-r a-c">
                        <div class="f-g">
                            <u-input  placeholder="请输入验证码" v-model="smscode" ></u-input>
                        </div>
                        <div class="f-s">
                            <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                                                 @change="codeChange"></u-verification-code>
                            <u-button type="primary" @tap="getCode">{{tips}}</u-button>
                        </div>
                    </div>
                </u-form-item>
            </u-form>

            <div class="submit" @click="submit">保存</div>
        </view>
    </div>
</template>

<script>
  import { API_URL } from '../../env.js'

  export default {
		data() {
			return {
          action: `${API_URL}index.php/api/common/upload`,
          header: {
              token: uni.getStorageSync("token"),
          },
				seconds: 60,
          smscode: '',
          aliPicList: [],
          weixinpicList: [],
          avatarList: [],
          tips: '',
        userInfo: {},
        userInfoPool: {}
      }
		},
    onLoad() {
      this.$api.isValidAddressAndPay().then(res2 => {
        if (res2.code == 1) {
          uni.setStorageSync('statusObj', res2.reason)
        }
      })
        this.$api.shouluanxinxi().then(res => {
          this.userInfo = {
            ...res.result,
            wxname: res.result.wxname || '',
            zfbname: res.result.zfbname || '',
            usdtbname: res.result.usdtbname || '',
          }
          this.userInfoPool = {
            ...res.result,
            wxname: res.result.wxname || '',
            zfbname: res.result.zfbname || '',
            usdtbname: res.result.usdtbname || '',
          }
          this.weixinpicList = [
            {
              url: this.userInfo.weixinpic
            }
          ].filter(el => el.url)
          this.aliPicList = [
            {
              url: this.userInfo.alipic
            }
          ].filter(el => el.url)
          this.avatarList = [
            {
              url: this.userInfo.usdtpic
            }
          ].filter(el => el.url)
        })
    },
		methods: {
			codeChange(text) {
							this.tips = text;
			},
        smsSend(callBack) {
            this.$api
                .smsSend({
                    mobile: this.userInfo.mobile,
                    event: "editinfo",
                })
                .then((res) => {
                    callBack(res);
                    this.$common.errorToShow(res.reason);
                });
        },
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
            this.smsSend((res) => {
                uni.hideLoading();
                // 这里此提示会被this.start()方法中的提示覆盖
                uni.$u.toast('验证码已发送');
                // 通知验证码组件内部开始倒计时
                this.$refs.uCode.start();
            })
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},

        uploadweixinpic(e) {
            this.userInfo.weixinpic = e.result.fullurl
        },
        removeweixinpic() {
            this.userInfo.weixinpic = ''
        },
        uploadAlipic(e) {
            this.userInfo.alipic = e.result.fullurl
        },
        removeAlipic() {
            this.userInfo.alipic = ''
        },
        uploadavatar(e) {
            this.userInfo.usdtpic = e.result.fullurl
        },
        removeavatar() {
            this.userInfo.usdtpic = ''
        },
        submit() {
          const form = {
              bankname: '',
              kaihubank: '',
              bankcard: '',
              realname: '',
              mobile: '',
            weixinpic: '',
            alipic: '',
            usdtpic: '',
            wxname: '',
            zfbname: '',
            usdtbname: '',
          }
            for (const formKey in form) {
              form[formKey] = this.userInfo[formKey]
            }

            if (form.weixinpic === this.userInfoPool.weixinpic) {
              form.weixinpic = ''
            }
            if (form.alipic === this.userInfoPool.alipic) {
              form.alipic = ''
            }
            if (form.usdtpic === this.userInfoPool.usdtpic) {
              form.usdtpic = ''
            }
          console.log(form)
            if (!this.userInfo.bankname) return uni.showToast({ icon: 'none', title: '银行账户名不能为空'})
            if (!this.userInfo.kaihubank) return uni.showToast({ icon: 'none', title: '开户分行不能为空'})
            if (!this.userInfo.bankcard) return uni.showToast({ icon: 'none', title: '银行卡号不能为空'})
          if (!this.userInfo.realname) return uni.showToast({ icon: 'none', title: '真实姓名不能为空'})
          if (!this.userInfo.weixinpic && !this.userInfo.alipic && !this.userInfo.usdtpic) return uni.showToast({ icon: 'none', title: '至少上传一个付款码'})
          if (!this.userInfo.wxname && !this.userInfo.zfbname && !this.userInfo.usdtbname) return uni.showToast({ icon: 'none', title: '至少填写一个付款姓名'})
            if (!this.smscode) return uni.showToast({ icon: 'none', title: '验证码不能为空'})
            this.$api.updateUser({
                ...form,
                smscode: this.smscode
            }).then(res => {
                if (res.code === 1) {
                  const statusObj = uni.getStorageSync('statusObj') || {}
                  if (statusObj.pay) {
                    uni.navigateBack();
                  } else {
                    uni.setStorageSync('statusObj', {
                      ...(uni.getStorageSync('statusObj') || {}),
                      pay: 1
                    })
                    uni.switchTab({
                      url:'/pages/home/home'
                    })
                  }
                }else {
                  this.$common.errorToShow(res.reason);
                }
            })
        }
		}
	}
</script>

<style lang="scss">
	.userinfo-page {
		min-height: 100%;
		background-color: #fff !important;
		padding: 0 20rpx;
      padding-bottom: 50px;
	}
</style>
